<template>
    <div>
        <el-card style="margin-top:10px">
            <div class="search-hearder">
                <h3>线上热门搜索</h3>
                <el-dropdown>
                    <span><i class="el-icon-more"></i></span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>黄金糕</el-dropdown-item>
                        <el-dropdown-item>狮子头</el-dropdown-item>
                        <el-dropdown-item>螺蛳粉</el-dropdown-item>
                        <el-dropdown-item>双皮奶</el-dropdown-item>
                        <el-dropdown-item>蚵仔煎</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>

            <div class="content">
                <el-row :gutter="10">
                    <!-- 图表 -->
                    <el-col :span="12">
                        <lineCharts></lineCharts>
                    </el-col>
                    <!-- 图表 -->
                    <el-col :span="12">
                        <lineCharts></lineCharts>
                    </el-col>
                </el-row>
            </div>

            <div class="footer">
                <el-table style="width: 100%" border >
                    <el-table-column type="index" align="center" label="排名" width="80"></el-table-column>
                    <el-table-column prop="name"  align="center" label="搜索关键字" width="180"></el-table-column>
                    <el-table-column prop="address" align="center" label="用户数" sortable ></el-table-column>
                    <el-table-column prop="address"  align="center" label="周涨幅" sortable></el-table-column>
                </el-table>
            </div>
        </el-card>
    </div>
</template>

<script>
import lineCharts from './lineCharts'
export default {
    name: 'Search',
    components: {
        lineCharts
    }
}
</script>

<style scoped>
.search-hearder {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
}

.el-dropdown {
    line-height: 59px;
}

.footer{
    margin-top: 5px;
}
</style>